<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {color: red}
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in movies" :class="{active:currentIndex == index}"
                @click="changeRed(index)">
                {{index}}.{{item}}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                movies: ['海王','加勒比海盗','海尔兄弟'],
                currentIndex:0
            },
            methods:{
                changeRed:function (index) {
                    this.currentIndex = index
                }
            }
        })
    </script>
</body>
</html>